<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-28 16:21:26
 * @LastEditTime: 2020-03-02 16:12:36
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/longPressRecording.css">
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <script type="text/javascript" src="../../script/moment.js"></script>
    <script type="text/javascript" src="../../script/Base64Helper.js"></script>
    <style type="text/css">
        .head {
            background: #ededed;
        }

        .van-nav-bar .van-icon {
            color: #000;
        }

        .van-nav-bar__title {
            color: #000;
            font-weight: 700;
        }

        .content {
            background: #ededed !important;
            border-top: 1px solid #e2e2e2;
        }

        .bottom {
            background: #f6f6f6;
            padding: 5px 0;
            height: auto;
        }

        .bottom .type {
            width: 50px;
            height: 100%;
            text-align: center;
            padding: 5px 10px;
            /* float: left; */
        }

        .bottom .type img {
            width: 100%;
            height: 100%;
        }

        .bottom .input {
            width: calc(100% - 100px);
            height: 40px;
            text-align: center;
            /* padding: 5px 10px; */
            /* float: left; */
            flex: 1;
            width: 0;
        }

        .bottom .input input {
            border: 0;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 6px;
            padding: 0 10px;
        }

        .bottom .input .void-button {
            border: 0;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 6px;
            line-height: 40px;
            font-weight: 700;
            font-size: 15px;
        }

        .bottom .input .void-button:active {
            background: #e2e2e2;
        }

        .bottom .more {
            height: 100%;
            min-width: 40px;
            text-align: center;
            padding: 5px 10px;
            /* float: left; */
        }

        .bottom .more img {
            width: 30px;
            height: 30px;
        }

        .t {
            color: #b2b2b2;
            font-size: 12px;
            text-align: center;
            padding: 10px;

        }

        .l .t span {
            margin-left: 25px;
        }

        .r .t span {
            margin-right: 60px;
        }

        .l {
            padding: 10px 53px 10px 10px;
        }

        .l .l-r {
            position: relative;
            overflow: hidden;
        }

        .l .l-r .header {
            float: left;
            width: 50px;
            height: 40px;
            padding-right: 10px;
        }

        .l .l-r .header>div {
            border-radius: 4px;
            overflow: hidden;
        }

        .l .l-r .header img {
            width: 40px;
            height: 40px;
        }

        .l .l-r .text {
            float: left;
            min-width: 88px;
            max-width: calc(100% - 50px);
            position: relative;
        }

        .l .l-r .text .arrow {
            position: absolute;
            left: -5px;
            top: 10px;
            width: 10px;
            height: 10px;
        }

        .l .l-r .text .arrow img {
            width: 100%;
            height: 100%;
        }

        .l .l-r .text .chat-bg {
            font-size: 15px;
            letter-spacing: 1px;
        }

        .l .l-r .text .chat-bg .value {
            background: #ffffff;
            min-height: 40px;
            padding: 10px;
            line-height: 20px;
            border-radius: 4px;
            overflow: hidden;
        }

        .l .l-r .text .chat-bg:active {
            background: #cccccc;

        }

        .l .l-r .text .chat-bg .voice {
            font-size: 14px;
            letter-spacing: 0;
        }

        .l .l-r .text .chat-bg .voice img {
            width: 16px;
        }

        .l .l-r .text .chat-bg .voice * {
            vertical-align: middle;
        }


        .r {
            padding: 10px 10px 10px 53px;
        }

        .r .l-r {
            position: relative;
            overflow: hidden;
        }

        .r .l-r .header {
            float: right;
            width: 50px;
            height: 40px;
            padding-left: 10px;
        }

        .r .l-r .header>div {
            border-radius: 4px;
            overflow: hidden;
        }

        .r .l-r .header img {
            width: 40px;
            height: 40px;
        }

        .r .l-r .text {
            float: right;
            min-width: 88px;
            max-width: calc(100% - 50px);
            position: relative;
        }

        .r .l-r .text .arrow {
            position: absolute;
            right: -5px;
            top: 10px;
            width: 10px;
            height: 10px;
        }

        .r .l-r .text .arrow img {
            width: 100%;
            height: 100%;
        }



        .r .l-r .text .chat-bg {
            font-size: 15px;
            letter-spacing: 1px;

        }

        .r .l-r .text .chat-bg .value {
            background: #95ec69;
            min-height: 40px;
            padding: 10px;
            line-height: 20px;
            overflow: hidden;
            border-radius: 4px;
        }

        .r .l-r .text .chat-bg .value:active {
            background: #68a24a;
        }

        .r .l-r .text .chat-bg .voice {
            font-size: 14px;
            text-align: right;
            letter-spacing: 0;
        }

        .r .l-r .text .chat-bg .voice img {
            width: 16px;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .r .l-r .text .chat-bg .voice * {
            vertical-align: middle;
        }

        .img {
            min-width: 88px;
            max-width: 150px;
            padding: 0 !important;
            background: #fff !important;
        }

        .img img {
            width: 100%;
        }

        .tool {
            background: #f6f6f6;
            transition: all .4s;
            height: 0;
            overflow: hidden;
        }

        .tool>div {
            border-top: 1px solid #dcdcdc;
            margin-top: 5px;
            padding: 15px;
        }

        .show-more {
            height: 115px;
        }

        .tool .tool-row {
            font-size: 12px;
            color: #a2a2a2;
            text-align: center;
        }

        .tool .tool-row .icon {
            background: #ffffff;
            border-radius: 10px;
            overflow: hidden;
            width: 60px;
            height: 60px;
            line-height: 76px;
            display: inline-block;
            margin-bottom: 5px;
        }

        .tool .tool-row .icon:active {
            background: #cccccc;
        }

        .b-b {
            display: -webkit-flex;
            display: flex;
            flex-wrap: nowrap;
        }

        .more .send {
            width: 52px;
            height: 30px;
            line-height: 30px;
            transition: all .4s;
            overflow: hidden;
            display: inline-block;
            color: #fff;
            background: #cd1b21;
            font-size: 12px;
            vertical-align: middle;
            border-radius: 4px;
        }

        .nore .send:active {
            background: #8e161a;
        }

        .more .send.w_o {
            width: 0;
            color: transparent;
        }

        .system {
            width: 100%;
        }

        .system .s-title {
            font-weight: 700;
            text-align: center;
            font-size: 16px;
        }

        .system .s-text {
            padding: 10px 0;
            line-height: 20px;
            color: #9e9e9e;
            font-size: 14px;
        }

        .system .s-detail {
            font-size: 12px;
            color: #9e9e9e;
        }

        .system .s-detail>* {
            vertical-align: middle;
        }

        .system .s-detail>img {
            width: 10px;
        }

        .read-status {
            font-size: 12px;
            text-align: right;
            color: #9e9e9e;
        }

        .status-red {
            color: #cd1b21;
        }

        .user-name {
            font-size: 12px;
            color: #9e9e9e;
            margin-top: -2px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="客服小幅" left-arrow
                @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click="openMore" v-show="nowChatUserData.type == 'group'">
                        <img src="../../image/ddd.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-with-bottom">
                <div class="content">
                    <ul>
                        <li class="t" v-show="showMore">
                            <van-loading type="spinner" size="16px"></van-loading>
                        </li>
                        <li v-for="(row,index) in chatList" v-show="row.content">
                            <div class="l" v-if="!row.mine">
                                <div class="t" v-show="isSHowTime(row,index)"><span>{{getDateTime(row)}}</span></div>
                                <div class="l-r">
                                    <div class="header">
                                        <div><img src="../../image/kf-i.png" /></div>
                                    </div>
                                    <div class="text" :style="{width:getWidth(row)}">
                                        <div class="chat-bg" @click="clickChat(row,index,$event)">
                                            <div class="user-name" v-show="nowChatUserData.type == 'group'">
                                                {{row.username}}</div>
                                            <div v-html="returnHtml(row)"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="r" v-else-if="row.mine">
                                <div class="t" v-show="isSHowTime(row,index)"><span>{{getDateTime(row)}}</span></div>
                                <div class="l-r">
                                    <div class="header">
                                        <div><img :src="row.avatar?row.avatar:'../../image/we_header.png'" /></div>
                                    </div>
                                    <div class="text" :style="{width:getWidth(row)}">
                                        <div class="chat-bg" @click="clickChat(row,index,$event)">
                                            <div v-html="returnHtml(row)"></div>
                                            <!-- <div class="read-status"
                                                :class="nowChatUserData.timestamp > row.timestamp?'':'status-red'"
                                                v-show="nowChatUserData.type == 'friend'">
                                                {{nowChatUserData.timestamp > row.timestamp?'已读':'未读'}}
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <van-loading v-if="showLoading" />
            </div>
            <div class="bottom">
                <div class="b-b">
                    <div class="type" @click="toggleInputType">
                        <img src="../../image/w_jp.png" v-show="inputType == 0" />
                        <img src="../../image/w_yy.png" v-show="inputType == 1" />

                    </div>
                    <div class="input">
                        <input v-model="msg" v-show="inputType == 0" type="text" id="bottom_input"
                            @click="isShowMore = false;" />

                        <div class="void-button" v-show="inputType == 1" id="audioInput">按住&nbsp;说话</div>
                    </div>
                    <div class="more">
                        <img src="../../image/more.png" v-show="!msg" @click="isShowMore = !isShowMore" />
                        <!-- <van-button type="primary" size="small" :class="msg?'':'w_o'">发送</van-button> -->
                        <div class="send" :class="msg?'':'w_o'" @click="sendMsg(msg)">发送</div>
                    </div>
                </div>
                <div class="tool" :class="isShowMore?'show-more':''">
                    <div>
                        <van-row gutter="15">
                            <van-col :span="6">
                                <div class="tool-row" @click="chooseImg">
                                    <div class="icon">
                                        <van-icon name="photo" size="26px" color="#4c4c4c"></van-icon>
                                    </div>

                                    <div>照片</div>
                                </div>
                            </van-col>
                            <van-col :span="6">
                                <div class="tool-row" @click="takePicture">
                                    <div class="icon">
                                        <van-icon name="photograph" size="26px" color="#4c4c4c"></van-icon>
                                    </div>
                                    <div>拍照</div>
                                </div>
                            </van-col>
                        </van-row>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="blackBoxSpeak">
        <p class="blackBoxSpeakConent">手指上划，取消发送</p>
    </div>

    <div class="blackBoxPause">
        <p class="blackBoxPauseContent" style="background: red">松开手指， 取消发送</p>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        var userInfo = FLD.getUserInfo();

        // var nowChatUserData = api.pageParam.row;

        // var id = api.pageParam.id;

        // var audioRecorder = api.require('audioRecorder');

        // var audioStreamer = api.require('audioStreamer');

        // var photoBrowser = api.require('photoBrowser');

        var base64_ = new Base64();
 
        var voiceAnimate;

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                inputType: 0,
                msg: '',
                isShowMore: false,
                chatList: [],
                chatAllList: [],
                voicePlayIndex: -1,
                pageIndex: 0,
                nowChatUserData: {},
                isLoading: false,
                showMore: false
            },
            created: function () {
                var that = this;
                that.getHistoryChat();
                // that.updateReadTime();
                // that.detaiilALive();

                setTimeout(function () {
                    that.initAudio();
                }, 500)

            },
            methods: {
                sendInitMsg() {
                    var that = this;
                    // var isFirst = api.getGlobalData({
                    //     key: 'isFirst'
                    // });
                    // if (isFirst) {
                    //     return false;
                    // } else {
                    //     api.setGlobalData({
                    //         key: 'isFirst',
                    //         value: 1
                    //     });
                    // }
                    that.chatList.push({
                        username: that.nowChatUserData.username,
                        id: that.nowChatUserData.id,
                        mine: false,
                        avatar: that.nowChatUserData.avatar,
                        content: '亲,我是客服小福,很高兴为您服务,请问有什么可以帮到您的?',
                        timestamp: moment().valueOf()
                    })
                },
                updateReadTime() {
                    var that = this;
                    FLD.ajax('UpdateReaderTime', {}, function () {

                    })
                },
                clearUnReadNum() {
                    var that = this;
                    api.sendEvent({
                        name: 'clearUnReadNum',
                        extra: {
                            chatID: that.nowChatUserData.id
                        }
                    });
                },
                openMore() {
                    var that = this;
                    api.openWin({
                        name: 'chatDetailMore',
                        url: 'chatDetailMore.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            nowChatUserData: that.nowChatUserData
                        }
                    })
                },
                detaiilALive() {
                    var that = this;
                    api.sendEvent({
                        name: 'sendMineMsg',
                        extra: {
                            msgObj: {
                                content: '',
                                toUserID: that.nowChatUserData.id,
                                type: that.nowChatUserData.type
                            }
                        }
                    });
                },
                getHistoryChat() {
                    var that = this;
                    var obj = {};
                    var cmd_name = '';
                    if (that.nowChatUserData.type == 'friend') {
                        obj = {
                            fromUserID: id,
                            toUserID: that.nowChatUserData.id
                        }
                        cmd_name = 'GetUserChatHistory';
                    } else {
                        obj = {
                            GroupID: that.nowChatUserData.id
                        }
                        cmd_name = 'GetGroupChatHistory';
                    }

                    FLD.ajax(cmd_name, obj, function (res) {
                        // console.log(JSON.stringify(res.ds))
                        let history = [];
                        for (var i in res.ds) {
                            if (res.ds[i].Content) {
                                history.push({
                                    username: res.ds[i].UserName,
                                    id: res.ds[i].FromUserID,
                                    mine: res.ds[i].FromUserID == id ? true : false,
                                    avatar: res.ds[i].HeadImg,
                                    timestamp: res.ds[i].CreateTimeStamp * 1000 - 8 * 60 * 60 * 1000,
                                    content: res.ds[i].Content
                                })
                            }

                        }
                        that.chatAllList = JSON.parse(JSON.stringify(history));
                        if (history.length <= 40) {
                            that.chatList = history;
                            that.isLoading = true;
                        } else {
                            that.chatList = history.slice(history.length - (40 * (that.pageIndex + 1)), history.length - (40 * that.pageIndex));
                        }
                        that.sendInitMsg();
                        that.$nextTick(function () {
                            $('.content').scrollTop($('.content')[0].scrollHeight - $('.content').height());
                            that.scrollListen();
                        })


                    })

                },
                scrollListen() {
                    var that = this;
                    $('.content').scroll(function () {
                        if (that.isLoading) return;
                        if ($('.content').scrollTop() < 30) {
                            var bottom_height = $('.content')[0].scrollHeight - $('.content').scrollTop();
                            that.isLoading = true;
                            that.pageIndex++;
                            if (that.pageIndex * 40 >= that.chatAllList.length) {
                                that.isLoading = true;
                                return;
                            }
                            var bottom_height = $('.content')[0].scrollHeight - $('.content').scrollTop();
                            that.chatList = that.chatAllList.slice(that.chatAllList.length - (40 * (that.pageIndex + 1)), that.chatAllList.length - (40 * that.pageIndex)).concat(that.chatList);

                            that.showMore = true;
                            that.$nextTick(function () {
                                setTimeout(function () {
                                    that.showMore = false;
                                    $('.content').scrollTop($('.content')[0].scrollHeight - bottom_height);
                                    that.isLoading = false;
                                }, 1000)

                            })

                        }
                    })
                },
                initAudio() {
                    var that = this;
                    //录音按钮
                    var audioInput = document.getElementById("audioInput");

                    //中间黑色边框和里面的内容（录音状态）
                    var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
                    blackBoxSpeak.style.background = "url('../../image/ic_record@2x.png')no-repeat 28 16px/65px 104px, url('../../image/ic_record_ripple@2x-9.png')no-repeat 111.2px 32px/28.8px 88px";
                    blackBoxSpeak.style.backgroundColor = "rgba(0,0,0,.7)";

                    //中间黑色边框和里面的内容（暂停状态）
                    var blackBoxPause = document.querySelector(".blackBoxPause");
                    blackBoxPause.style.background = "rgba(0,0,0,.7) url('../../image/ic_release_to_cancel@2x.png')no-repeat center 8px/67.2px 104px";
                    blackBoxPause.style.backgroundColor = "rgba(0,0,0,.7)";

                    //手指移动相关
                    var posStart = 0; //初始化起点坐标
                    var posEnd = 0; //初始化终点坐标
                    var posMove = 0; //初始化滑动坐标

                    //轮播相关
                    var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                    var num = index.length;
                    var timer = null; //用于清除计时器

                    function initEvent() {

                        audioInput.addEventListener("touchstart", function (event) {
                            setTimer();
                            event.preventDefault(); //阻止浏览器默认行为
                            posStart = 0;
                            posStart = event.touches[0].pageY; //获取起点坐标

                            // api.startRecord();
                            audioRecorder.startRecord({
                                savePath: 'fs://voice.aac',
                                format: 'aac'
                            }, function (ret, err) {

                            });
                            //显示录音 隐藏暂停
                            showBlackBoxSpeak();

                        });
                        audioInput.addEventListener("touchmove", function (event) {
                            event.preventDefault(); //阻止浏览器默认行为

                            posMove = event.targetTouches[0].pageY; //获取滑动实时坐标
                            if (posStart - posMove < 200) {
                                //隐藏录音 显示暂停
                                showBlackBoxSpeak();
                            } else {
                                //显示录音 隐藏暂停
                                showBlackBoxPause();
                            }
                        });
                        audioInput.addEventListener("touchend", function (event) {
                            event.preventDefault(); //阻止浏览器默认行为
                            posEnd = 0;
                            posEnd = event.changedTouches[0].pageY; //获取终点坐标

                            clearInterval(timer);
                            //初始化状态
                            initStatus();

                            if (posStart - posEnd < 200) {
                                //发送成功
                                showBlackBoxNone();
                                setTimeout(function () {

                                    audioRecorder.stopRecord(function (ret) {
                                        if (ret && ret.status) {
                                            audioRecorder.getAttr({
                                                path: 'fs://voice.aac'
                                            }, function (ret) {
                                                var time = parseInt(ret.duration / 1000);
                                                if (time) {
                                                    FLD.uploadFile('APP_Audio', 'fs://voice.aac', function (path) {
                                                        var mp3_path = 'http://' + FLD.serverIP + path;
                                                        audioStreamer.onNormal();
                                                        audioStreamer.openPlayer({
                                                            path: 'widget://image/chat/voice.mp3',
                                                        }, function (ret) {

                                                        });


                                                        that.sendMsg('[div mp3_src=' + mp3_path + ' voice_time=' + time + ' onclick=playmp3(this)][div class=mp3_icon][/div][div style=display:inline-block;vertical-align: middle; ]语音消息[/div][/div]');

                                                    })
                                                }

                                            });

                                        }
                                    });

                                }, 200)


                            } else {
                                //取消发送
                                showBlackBoxNone();
                                audioRecorder.stopRecord(function (ret) {

                                });
                            }
                        });
                    }

                    initEvent();

                    //轮播
                    function setTimer() {
                        // timer = setInterval(function () {
                        //     setTimeout(function () {
                        //         num++;
                        //         blackBoxSpeak.style.background = "url('../image/ic_record@2x.png')no-repeat 28px 16px/64px 104px, url('../image/ic_record_ripple@2x-" + index[num] + ".png')no-repeat 111.2px 32px/28.8px 88px";
                        //         blackBoxSpeak.style.backgroundColor = " rgba(0,0,0,.7)";
                        //     }, 70);
                        //     if (num >= index.length - 1) {
                        //         num = 0;
                        //     }
                        // }, 200);

                        blackBoxSpeak.style.background = "url('../../image/ic_record@2x.png')no-repeat 28px 16px/64px 104px, url('../../image/ic_record_ripple@2x-" + index[2] + ".png')no-repeat 111.2px 32px/28.8px 88px";
                        blackBoxSpeak.style.backgroundColor = " rgba(0,0,0,.7)";
                    }

                    //初始化状态
                    var initStatus = function () {
                        audioInput.innerHTML = '按住 说话';
                        //全部隐藏
                        showBlackBoxNone();
                    }

                    //显示录音 隐藏暂停
                    var showBlackBoxSpeak = function () {
                        audioInput.innerHTML = '松开 结束';
                        blackBoxSpeak.style.display = "block";
                        blackBoxPause.style.display = "none";
                    }

                    //隐藏录音 显示暂停
                    var showBlackBoxPause = function () {
                        audioInput.innerHTML = '松开手指，取消发送';
                        blackBoxSpeak.style.display = "none";
                        blackBoxPause.style.display = "block";
                    }

                    //隐藏录音
                    var showBlackBoxNone = function () {
                        blackBoxSpeak.style.display = "none";
                        blackBoxPause.style.display = "none";
                    }

                },
                isSHowTime(row, index) {
                    var that = this;
                    if (index == 0) {
                        return true;
                    } else {
                        // console.log(row.timestamp - that.chatList[index - 1].timestamp)
                        if (row.timestamp - that.chatList[index - 1].timestamp > 3 * 60 * 1000) {

                            return true;
                        } else {
                            return false;
                        }
                    }
                },
                isSHowArrow(row) {
                    var that = this;
                    if (row.content.indexOf('img') > -1) {
                        return false;
                    } else {
                        return true;
                    }
                },
                getDateTime(row) {
                    var that = this;
                    var rt = FLD.getChatFormatDate(new Date(moment(row.timestamp)))
                    return rt;
                },
                returnHtml(row) {
                    var that = this;
                    if (row.content.indexOf('语音消息') > -1 && row.content.indexOf('mp3_src') > -1) {

                        var voice_timeArray = row.content.match(/voice_time=(\S*) /) || [];
                        if (row.mine) {
                            return '<div class="value voice"><span>' + (voice_timeArray.length > 1 ? voice_timeArray[1] : '') + '"</span>&nbsp;<img src="../../image/voice.png" /></div>';
                        } else {
                            return '<div class="value voice"><img src="../../image/voice.png" />&nbsp;<span>' + (voice_timeArray.length > 1 ? voice_timeArray[1] : '') + '"</span></div>';
                        }

                    } else if (row.content.indexOf('img[') > -1) {
                        var picArray = row.content.match(/img\[(\S*)\]/) || [];
                        return '<div class="value img"><img src="' + (picArray.length > 1 ? picArray[1] : '') + '" /></div>';
                    } else if (row.content.indexOf('openDetailFromMsg') > -1) {
                        var titleArray = row.content.match(/36px; \](\S*)\[\/div\]/) || [];
                        var contentArray = row.content.match(/\[div\](\S*)\[\/div\]/) || [];

                        return '<div class="value system"><div class="s-title">' + (titleArray.length > 1 ? titleArray[1] : '') + '</div><div class="s-text">' + (contentArray.length > 1 ? contentArray[1] : '') + '</div><div class="s-detail"><span>查看详情</span><img src="../../image/arrow-t-r.png" /></div></div>';
                    } else {
                        return '<div class="value">' + row.content + '</div>';
                    }
                },
                clickChat(row, index, e) {
                    var that = this;
                    var voice_pathArray = row.content.match(/mp3_src=(\S*) /) || [];
                    if (voice_pathArray.length > 1) {
                        var img_dom = $(e.target).parent().find('img');
                        if (that.voicePlayIndex == index) {
                            audioStreamer.stop();
                            that.voicePlayIndex = -1;
                            clearInterval(voiceAnimate);
                            img_dom.attr('src', '../../image/voice.png');
                            return;
                        }
                        that.voicePlayIndex = index;
                        var voice_timeArray = row.content.match(/voice_time=(\S*) /) || [];
                        if (voice_timeArray.length > 1) {
                            clearInterval(voiceAnimate);
                            voiceAnimate = setInterval(function () {
                                voice_timeArray[1] = voice_timeArray[1] - 0.3;
                                if (voice_timeArray[1] < 0) {
                                    clearInterval(voiceAnimate);
                                    img_dom.attr('src', '../../image/voice.png');
                                    that.voicePlayIndex = -1;
                                    return;
                                }
                                if (img_dom.attr('src') == '../../image/voice.png') {
                                    img_dom.attr('src', '../../image/voice-1.png');
                                } else if (img_dom.attr('src') == '../../image/voice-1.png') {
                                    img_dom.attr('src', '../../image/voice-2.png');
                                } else if (img_dom.attr('src') == '../../image/voice-2.png') {
                                    img_dom.attr('src', '../../image/voice.png');
                                }
                            }, 300);
                        }

                        audioStreamer.onNormal();
                        audioStreamer.openPlayer({
                            path: voice_pathArray[1],
                        }, function (ret) {

                        });

                    } else if (row.content.indexOf('img') > -1) {
                        var picArray = row.content.match(/img\[(\S*)\]/) || [];
                        photoBrowser.open({
                            images: [picArray.length > 1 ? picArray[1] : ''],
                            bgColor: '#000'
                        }, function (ret) {
                            if (ret) {
                                if (ret.eventType == 'click') {
                                    photoBrowser.close();
                                }
                            }
                        })
                    } else if (row.content.indexOf('openDetailFromMsg') > -1) {
                        // alert(row.content)
                        var msgInfoArray = row.content.match(/msgInfo=(\S*) /) || [];
                        if (msgInfoArray.length) {
                            var msgInfoObj = JSON.parse(base64_.decode(msgInfoArray[1]));
                            if (msgInfoObj.msgType == 2) {
                                var billTypeArray = row.content.match(/S_BillType=(\S*) /) || [];
                                var billIDArray = row.content.match(/S_BillID=(\S*) /) || [];

                                var S_BillType = billTypeArray.length > 1 ? billTypeArray[1] : ''
                                var S_BillID = billIDArray.length > 1 ? billIDArray[1] : ''
                                var obj = {
                                    S_BillType: S_BillType,
                                    S_BillID: S_BillID
                                }
                                if (S_BillType == 101 || S_BillType == 1101 || S_BillType == 401) {

                                    FLD.ajax('AP_HisList_XX', obj, function (res) {
                                        if (res.ds.length) {
                                            var row = res.ds[0];
                                            if (S_BillType == 101 || S_BillType == 1101) {
                                                if (row.B_Type == 3) {
                                                    api.openWin({
                                                        name: 'sellingPrint',
                                                        url: '../sellingPrint.html',
                                                        reload: true,
                                                        slidBackEnabled: false,
                                                        pageParam: {
                                                            historyData: row
                                                        }
                                                    })
                                                } else {
                                                    api.openWin({
                                                        name: 'selling',
                                                        url: '../selling.html',
                                                        reload: true,
                                                        slidBackEnabled: false,
                                                        pageParam: {
                                                            historyData: row
                                                        }
                                                    })
                                                }
                                            } else if (S_BillType == 401) {
                                                api.openWin({
                                                    name: 'receipt',
                                                    url: '../receipt.html',
                                                    reload: true,
                                                    slidBackEnabled: false,
                                                    pageParam: {
                                                        historyData: row
                                                    }
                                                })
                                            }
                                        }
                                    })
                                } else {
                                    FLD.ajax('APP_BillLinkN', obj, function (res) {
                                        if (res.ds.length) {
                                            api.openWin({
                                                name: 'formConfig',
                                                url: '../commonformConfig.html',
                                                reload: true,
                                                slidBackEnabled: false,
                                                pageParam: {
                                                    keyName: res.ds[0].B_KeyCol,
                                                    keyValue: pageParam.S_BillID,
                                                    objName: res.ds[0].APPListName,
                                                    titleName: res.ds[0].BillName
                                                    // isPosted: true
                                                }
                                            })
                                        }
                                    })
                                }



                            } else if (msgInfoObj.msgType == 3) {
                                var formData = {};
                                if (msgInfoObj.RPTPara) {
                                    var paramArray = msgInfoObj.RPTPara.split('&');
                                    for (var i in paramArray) {
                                        var paramDetailArray = paramArray[i].split('=');
                                        formData[paramDetailArray[0]] = paramDetailArray[1];
                                    }
                                }
                                api.openWin({
                                    name: msgInfoObj.RPTName + '_0',
                                    url: '../common/formConfigReport.html',
                                    reload: true,
                                    slidBackEnabled: false,
                                    pageParam: {
                                        objName: msgInfoObj.RPTName,
                                        formData: formData
                                    }
                                })
                            }

                        } else {
                            var billTypeArray = row.content.match(/S_BillType=(\S*) /) || [];
                            var billIDArray = row.content.match(/S_BillID=(\S*) /) || [];

                            var S_BillType = billTypeArray.length > 1 ? billTypeArray[1] : ''
                            var S_BillID = billIDArray.length > 1 ? billIDArray[1] : ''
                            var obj = {
                                S_BillType: S_BillType,
                                S_BillID: S_BillID
                            }
                            if (S_BillType == 101 || S_BillType == 1101 || S_BillType == 401) {

                                FLD.ajax('AP_HisList_XX', obj, function (res) {
                                    if (res.ds.length) {
                                        var row = res.ds[0];
                                        if (S_BillType == 101 || S_BillType == 1101) {
                                            if (row.B_Type == 3) {
                                                api.openWin({
                                                    name: 'sellingPrint',
                                                    url: '../sellingPrint.html',
                                                    reload: true,
                                                    slidBackEnabled: false,
                                                    pageParam: {
                                                        historyData: row
                                                    }
                                                })
                                            } else {
                                                api.openWin({
                                                    name: 'selling',
                                                    url: '../selling.html',
                                                    reload: true,
                                                    slidBackEnabled: false,
                                                    pageParam: {
                                                        historyData: row
                                                    }
                                                })
                                            }
                                        } else if (S_BillType == 401) {
                                            api.openWin({
                                                name: 'receipt',
                                                url: '../receipt.html',
                                                reload: true,
                                                slidBackEnabled: false,
                                                pageParam: {
                                                    historyData: row
                                                }
                                            })
                                        }
                                    }
                                })
                            } else {
                                FLD.ajax('APP_BillLinkN', obj, function (res) {
                                    if (res.ds.length) {
                                        api.openWin({
                                            name: 'formConfig',
                                            url: '../commonformConfig.html',
                                            reload: true,
                                            slidBackEnabled: false,
                                            pageParam: {
                                                keyName: res.ds[0].B_KeyCol,
                                                keyValue: pageParam.S_BillID,
                                                objName: res.ds[0].APPListName,
                                                titleName: res.ds[0].BillName
                                                // isPosted: true
                                            }
                                        })
                                    }
                                })
                            }
                        }



                    }
                },
                getWidth(row) {
                    var that = this;
                    var voice_pathArray = row.content.match(/mp3_src=(\S*) /) || [];
                    var voice_timeArray = row.content.match(/voice_time=(\S*) /) || [];
                    if (voice_pathArray.length > 1 && voice_timeArray.length > 1) {
                        var width = parseInt(voice_timeArray[1]);
                        return (width / 59) * 100 + 20 + '%';
                    }
                    if (row.content.indexOf('openDetailFromMsg') > -1) {
                        return '100%';
                    }
                },
                chooseImg() {
                    var that = this;
                    var UIAlbumBrowser = api.require('UIAlbumBrowser');
                    UIAlbumBrowser.imagePicker({
                        max: 1,
                        styles: {
                            nav: {
                                bg: '#efefef',
                                cancelColor: '#000',
                                nextStepColor: '#000',
                                finishText: '完成'
                            }
                        },
                        rotation: true
                    }, function (ret) {
                        if (ret) {
                            if (ret.originalPath) {
                                UIAlbumBrowser.closePicker();
                                UIAlbumBrowser.transPath({
                                    path: ret.assetPath || ret.originalPath
                                }, function (ret, err) {
                                    if (ret) {
                                        FLD.uploadFile('APP_Picture', ret.path, function (path) {
                                            var serverPath = 'http://' + FLD.serverIP + path;
                                            that.sendMsg('img[' + serverPath + ']');
                                        })
                                    }
                                });
                            } else if (ret.eventType == 'nextStep') {
                                UIAlbumBrowser.closePicker();
                                var imgLists = ret.list;
                                UIAlbumBrowser.transPath({
                                    path: imgLists[0].path
                                }, function (ret, err) {
                                    if (ret) {
                                        FLD.uploadFile('APP_Picture', ret.path, function (path) {
                                            var serverPath = 'http://' + FLD.serverIP + path;
                                            that.sendMsg('img[' + serverPath + ']');
                                        })
                                    }
                                });
                            }

                        }
                    });
                },
                takePicture() {
                    var that = this;
                    var FNPhotograph = api.require('FNPhotograph');
                    FNPhotograph.open({
                        path: 'fs://',
                        album: true,
                        quality: 'medium'
                    }, function (ret) {
                        if (ret.eventType == 'takePhoto') {
                            FNPhotograph.close();
                            FLD.uploadFile('APP_Picture', ret.imagePath, function (path) {
                                var serverPath = 'http://' + FLD.serverIP + path;
                                that.sendMsg('img[' + serverPath + ']');
                            })
                        }
                    });
                },
                sendMsg(msg) {
                    var that = this;
                    if (!msg) return;

                    that.chatList.push({
                        username: userInfo.UserName,
                        id: id,
                        mine: true,
                        avatar: that.shoppingMallServerIP + userInfo.Picture,
                        content: msg,
                        timestamp: moment().valueOf()
                    })
                    that.$nextTick(function () {
                        $('.content').scrollTop(9999999999);
                    })
                    var lastChatObj = {};
                    if (that.nowChatUserData.type == 'group') {
                        lastChatObj = {
                            groupname: that.nowChatUserData.groupname || that.nowChatUserData.username,
                            username: userInfo.UserName,
                            id: that.nowChatUserData.id,
                            mine: true,
                            avatar: that.shoppingMallServerIP + userInfo.Picture,
                            content: msg,
                            type: 'group',
                            timestamp: moment().valueOf()
                        }
                    } else {
                        lastChatObj = {
                            groupname: '',
                            username: that.nowChatUserData.username,
                            id: that.nowChatUserData.id,
                            mine: true,
                            avatar: that.nowChatUserData.avatar,
                            content: msg,
                            type: 'friend',
                            timestamp: moment().valueOf()
                        }
                    }
                    api.sendEvent({
                        name: 'setLastChat',
                        extra: {
                            msgObj: lastChatObj,
                            chatID: that.nowChatUserData.id
                        }
                    });
                    api.sendEvent({
                        name: 'sendMineMsg',
                        extra: {
                            msgObj: {
                                content: msg,
                                toUserID: that.nowChatUserData.id,
                                type: that.nowChatUserData.type
                            }
                        }
                    });
                    that.msg = '';
                    that.updateReadTime();
                },
                toggleInputType() {
                    var that = this;
                    var isSHowKeyboard = false;
                    if (that.inputType == 0) {
                        that.inputType = 1;

                    } else {
                        that.inputType = 0;
                        isSHowKeyboard = true;
                    }
                    that.$nextTick(function () {
                        api.setFocus({
                            inputId: 'bottom_input',
                            focus: isSHowKeyboard
                        });
                        $('#bottom_input').focus();
                        that.isShowMore = false;
                    })

                },
                onClickLeft() {
                    var that = this;
                    that.clearUnReadNum();
                    api.sendEvent({
                        name: 'setUnRedMsg',
                        extra: {
                            dot: 0
                        }
                    });
                    api.closeWin();
                }
            }
        })
    }
</script>

</html>